<script setup lang="ts">
import { omitText } from "@@/utils/tools/format";
import dayjs from "dayjs";
import { PopoverPlacement } from "vant";

const props = withDefaults(
  defineProps<{
    placement?: PopoverPlacement;
    bg: string;
    address?: string;
    created_at?: any;
  }>(),
  {
    bg: "var(--C-M1-O3)",
    placement: "top",
  }
);

const invite = computed(
  () => window.location.origin + "/#/?invit=" + props.address
);
</script>

<template>
  <Rpopover class="Bdot" :placement="placement">
    <template #reference>
      <div class="Bdot_dot" :style="{ background: bg }"></div>
    </template>
    <Ccard v-if="address" bg="var(--C-B3)" class="T-A-C R-0 clip-path-1">
      <CcopyText :copy-text="invite">{{
        omitText(invite, [10, "...", 4])
      }}</CcopyText>
      <VanDivider />
      <div>
        {{ dayjs(created_at).format("YYYY/MM/DD HH:mm:ss") }}
      </div>
    </Ccard>
  </Rpopover>
</template>

<style lang="scss" scoped>
.Bdot_dot {
  height: 40rem;
  width: 40rem;
  border-radius: var(--R-max);
}
</style>
<style lang="scss">
.Bdot {
  .van-popover__content {
    background: none;
  }
}
</style>
